<template>
  <div class="component-container">
    <header class="component-header">
      <h1>{{ title }}</h1>
    </header>
    <main class="component-main">
      <el-link
        :underline="false"
        href="https://element.eleme.cn"
        target="_blank"
        icon="el-icon-paperclip"
        class="link"
        >Element UI 文档</el-link
      >
      <slot></slot>
    </main>
    <footer class="component-footer">
      <el-tooltip placement="top">
        <div slot="content">别点！！！<br />真的是！！</div>
        <el-button
          type="danger"
          icon="el-icon-warning"
          @click="handleClick"
          class="button"
          >禁止点击</el-button
        >
      </el-tooltip>
    </footer>
    <el-button type="text" @click="dialogVisible = true">日历</el-button>
    <el-dialog
      title="日历"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-calendar v-model="value"> </el-calendar>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-card shadow="hover" style="width: 100%; margin-top: 20px">
      <div style="width: 100%; display: inline-block">
        <el-statistic
          @finish="hilarity"
          :value="deadline"
          time-indices
          title="倒计时"
        >
          <template slot="suffix">
            <el-button type="primary " size="mini" @click="add"
              >add 10s</el-button
            >
          </template>
        </el-statistic>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'GenericComponent',
  props: {
    title: {
      type: String,
      default: '文字链接'
    }
  },
  data () {
    return {
      message: '。。。有病！！！',
      deadline: Date.now() + 1000 * 10,
      value: new Date(),
      dialogVisible: false
    }
  },
  methods: {
    hilarity () {
      this.$notify({
        title: '提示',
        message: '时间已到',
        duration: 0
      })
    },
    clickFn () {
      this.$refs.statistic.suspend(this.stop)
      this.stop = !this.stop
    },
    add () {
      this.deadline = this.deadline + 1000 * 10
    },
    handleClick () {
      alert(this.message)
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => { })
    }
  },
  mounted () {
    //console.log('组件已挂载')
  }
}
</script>

<style scoped lang="less">
.component-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s;

  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
}

.component-header {
  margin-bottom: 20px;
  text-align: center;
  color: #333;
  font-weight: bold;
}

.component-main {
  margin-bottom: 20px;
  text-align: center;
}

.link {
  color: #409eff;
  font-size: 16px;
  margin-bottom: 10px;
  transition: color 0.3s;

  &:hover {
    color: #66b1ff;
  }
}

.button {
  width: 100%;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s, transform 0.3s;

  &:hover {
    background-color: #f56c6c;
    transform: scale(1.05);
  }
}
</style>
